// npm install vue-router                安装跳转页面路由
// npm i element-ui -S                   安装element-ui终端
// npm install --save axios vue-axios    安装axios终端

<template>
  <div>

    <el-card class="box-card" style="width: auto;height: 60px;background-color: lightskyblue" >
      <span>积云账单管理系统</span>
      <span style="float: right">欢迎你！
      <el-button type="success" size="small" @click="out">退出</el-button></span>

    </el-card>
    <el-container>
      <!--左侧栏-->
      <el-container style="height: 600px">
        <el-aside width="200px">
          <!--先开启路由模式-->
          <el-menu router default-active="/" style="height: 50px" :default-openeds="openeds"
          >
            <el-submenu index="1" >
              <template slot="title">
                <span >功能管理</span>
              </template>


              <el-menu-item index="/bill" @click="111">
                <span slot="title">账单管理</span>
              </el-menu-item>

              <el-menu-item index="/supplier">
                <span slot="title">供应商管理</span>
              </el-menu-item>

              <div @click="author()">
                <el-menu-item index="/user">
                  <span slot="title">用户管理</span>
                </el-menu-item>
              </div>
              <el-menu-item index="/changePassword">
                <span slot="title">密码修改</span>
              </el-menu-item>

              <el-menu-item index="/">
                <span slot="title">退出登录</span>
              </el-menu-item>


            </el-submenu>

          </el-menu>

        </el-aside>

        <!--主栏-->
        <el-container width="100%">
          <el-main>
            <!--锚点-->
            <router-view/>
          </el-main>
        </el-container>

      </el-container>

    </el-container>
  </div>
</template>

<script>
export default {
  name: "index",
  data() {
    return {
      openeds: ['1'],
      user: {}
    }
  },
  methods: {

    logout() {
      this.$router.push('/');
    },

    out() {
      this.$router.push("/");
    },

    author() {
      if (this.user.rid === 3) {
        this.$message.error("您没有权限")
        this.$router.push("/index");
      }
    }


  },
  created() {
    this.user = JSON.parse(localStorage.getItem("user"))
  }
}
</script>

<style>
.el-header {
  background-color: #47ffce;
}

.el-aside {
  height: 550px;
}

.el-main {
}

.headerDiv {
  display: flex;
  justify-content: space-between;
  cursor: pointer;
}

.logoAndTitle {
  display: flex;
  align-items: center;
}

.imageDiv {
  display: flex;
  align-items: center;
}

.logoAndTitle h3 {
  margin-left: 10px;
}

.imageDiv h5 {
  margin-left: 5px;
}

.imageDiv img {
  border-radius: 40px;
}

.el-menu {
  height: 100vh;
}

//去掉网页全部滚动条
::-webkit-scrollbar {
  width: 0 !important;
}

::-webkit-scrollbar {
  width: 0 !important;
  height: 0;
}
</style>
